<template>
  <div class="detail-nav-bar">
    <NavBar class="detail-nav">
      <template v-slot:nav-left>
        <div class="title-img" @click="backClick">
          <img src="~assets/img/common/back.svg" alt="返回按钮图片" />
        </div>
      </template>
      <template v-slot:nav-center>
        <div class="title">
          <div
            v-for="(item, index) in titles"
            class="title-item"
            :class="{ active: curIndex == index }"
            @click="itemClick(index)"
          >
            {{ item }}
          </div>
        </div>
      </template>
    </NavBar>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import NavBar from "../../../components/common/navbar/NavBar.vue";

const router = useRouter();
const data = reactive({
  titles: ["商品", "参数", "评论", "推荐"],
  curIndex: 0,
  isActive: true,
});
const { curIndex, titles } = toRefs(data);
const emit = defineEmits(["titleClick"]);

defineExpose({
  curIndex
})

function itemClick(index: any) {    
  data.curIndex = index;
  emit("titleClick", index);
}

function backClick() {
  router.back();
}
</script>
<style lang="less">
.title {
  display: flex;
  font-size: 14px;
}

.title-item {
  flex: 1;
}

.active {
  color: var(--color-high-text);
}

.title-img img {
  vertical-align: middle;
}
</style>
